<template>
  <div>
    <slot v-if="!withPop"></slot>
    <div class="ui dimmer page transition" :class="{active: isActive}"  @click="oncancel" v-else>
      <div class="ui modal visible active">
        <div class="header tpop2"><i class="icon remove"  @click="oncancel"></i></div>
        <div class="content" @click.stop="">
          <div class="editCom-wrapper ui container segment" :style="{minHeight: minHeight}">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import tool from 'src/util/tool';
  import util from '_util/index';


  export default {
    data() {
      return {
       isActive: false,
     }
    },
   methods: {
    oncancel(){
      this.isActive = false;
      this.$emit("oncancel", {});
    }
  },
  props: {
    active:{
      type:Boolean,
      default(){
        return false
      }
    },
    withPop:{
      type: Boolean,
      default(){
        return false
      }
    },
    minHeight:{
      type: String,
      default(){
        return "auto"
      }
    }
  },
  watch:{
    active(val){
      this.isActive = val;
    }
  },
  created(){
    this.isActive = this.active;
  }
}
</script>
<style lang="less" scoped>
  .ui.dimmer{
    overflow-y: auto;
  }
  .ui.dimmer>.ui.modal{
    background-color: transparent;
    height: auto;
    position: relative;
    margin: 0 auto!important;
    left: inherit;
    top:inherit;
    padding: 20px 0;
    box-shadow: none;
    .header.tpop2{
      background-color: transparent;
      text-align: right;
      padding: 20px 0;
      .icon{
        color: #fff;
        cursor: pointer;
      }
    }
    .content{
      height: auto;
      padding: 10px;
    }
  }
</style>
